<template>
  <div class="login">
    <div class="fullLogin">
      <full></full>
    </div>
    <div class="loginContainer" v-loading="loading">
      <div class="title">登录入口</div>
      <div class="item">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="loginBtn" @click="submitForm">登录</div>
      </div>
    </div>
  </div>
</template>
<script>
import full from './full.vue'
export default {
  components: { full },
  data() {
    return {
      loading: false,
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      ruleForm: {
        name: 'admin',
        password: 123456
      },
      loginParams: {
        name: 'admin',
        password: 123456
      }
    }
  },
  mounted() {},
  methods: {
    submitForm() {
      // console.log(form)
      this.loading = true
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 开始校验密码
          if (this.ruleForm.name !== 'admin') {
            this.loading = false
            this.$message.error('用户名错误')
            return
          }
          if (this.ruleForm.password !== 123456) {
            this.loading = false
            this.$message.error('用户密码错误')
            return
          }
          this.loading = false
          this.$router.push('/people')
        } else {
          // this.$message.error('请输入用户名或者密码')
          this.loading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  background-image: url('@/assets/login-bg.png');
  background-repeat: no-repeat; /* 不平铺。图片只展示一次。 */
  height: 100%;
  width: 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  display: flex;
  position: relative;
  .fullLogin {
    position: absolute;
    right: 2px;
    // top: 10px;
  }
  .loginContainer {
    margin: auto;
    height: 350px;
    width: 420px;
    background-image: url('@/assets/login-areabg.png');
    background-repeat: no-repeat; /* 不平铺。图片只展示一次。 */
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    .title {
      margin: auto;
      // width: 200px;
      background: linear-gradient(0deg, #ffd179 0%, #ffffff 50%, #ffd387 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      font-size: 22px;
      margin-top: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
    .item {
      width: 75%;
      margin: 0 auto;
      margin-top: 45px;
      width: 360px;
      .el-form {
        ::v-deep .el-form-item__label {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #e3b68d;
        }
        ::v-deep .el-input__inner {
          background-color: transparent !important;
          border: 1px solid #f4d6a3;
          color: #fff;
        }
        ::v-deep .el-form-item__error {
          color: #fff;
        }
      }
      .loginBtn {
        width: 360px;
        text-align: center;
        background-color: #f4d6a3;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #d03233;
        padding: 5px 0;
        cursor: pointer;
        caret-color: transparent;
        margin-top: 50px;
      }
    }
  }
}
</style>
